// 为你推荐的逻辑
import '../sass/_recommended.scss'

// 为你推荐  选项卡的逻辑
const btns = document.querySelectorAll('.recommended >.btn > li')
const tabs = document.querySelectorAll('.recommended >.tab >li')
// console.log(btns)
// console.log(tabs)

/**************** 选项卡 ******************/
for(let i = 0; i < btns.length; i++){
    btns[i].onmouseover = function(){
        for(let j = 0; j < btns.length; j++){
            btns[j].classList.remove('active')
            tabs[j].classList.remove('active')
        }
        btns[i].classList.add('active')
        tabs[i].classList.add('active')
    }
}

// 拿到选项卡的按钮
const tabs1 = document.querySelector('.tabs1')
const tabs2 = document.querySelector('.tabs2')
const tabs3 = document.querySelector('.tabs3')
const tabs4 = document.querySelector('.tabs4')
const tabs5 = document.querySelector('.tabs5')
const tabs6 = document.querySelector('.tabs6')
const tabs7 = document.querySelector('.tabs7')

const loading = document.querySelector('.loading')
/*************** 渲染页面 ******************/
// 为你推荐, 
bindrecommendedDrink()
bindrecommendedToy()
bindrecommendedTV()
bindrecommendedHaiwai()
bindrecommendedJiajv()
bindrecommendedJewelry()
bindrecommendedNvzhuang()

/**************** 食品酒水 ******************/
async function bindrecommendedDrink(){

        const res = await $.ajax({
              url:'http://localhost:8888/goods/list',
              data: {
                  current: 1,
                  pagesize: 100,
                  search: '',
                  filter:'',
                  // saleType:'',
                  sortType:'id',
                  sortMethod:'ASC',
                  category:'食品酒水'
              },
          })
        //  console.log(res)
            let str=` `
        
            res.list.forEach( item => {
                str+=`
                <li data-id="${item.goods_id}">
                <img width=270 height=300 data-src="${item.img_big_logo}" alt="" class="goods_img"> 
                <p class="jieshao">
                ${item.title}
                </p>
                <p class="price">
                      <span class="new">￥${item.current_price}</span>
                      <span class="old">￥${item.price}</span>
                </p>
          </li>
                `
            }) 
        tabs1.innerHTML = str
        useLazy1()
}

/**************** 童装玩具 *****************/
async function bindrecommendedToy(){
 const res = await $.ajax({
    url:'http://localhost:8888/goods/list',
    data: {
        current: 1,
        pagesize: 100,
        search: '',
        filter:'',
        // saleType:'',
        sortType:'id',
        sortMethod:'ASC',
        category:'童装玩具'
    },
})
console.log(res)
let str=` `

res.list.forEach( item => {
    str+=`
    <li data-id="${item.goods_id}">
    <img width=270 height=300 data-src="${item.img_big_logo}" alt="" class="goods_img"> 
    <p class="jieshao">
    ${item.title}
    </p>
    <p class="price">
          <span class="new">￥${item.current_price}</span>
          <span class="old">￥${item.price}</span>
    </p>
</li>
    `
})

tabs2.innerHTML = str
useLazy1()
}

/**************** 大家电 *******************/
async function bindrecommendedTV(){
const res = await $.ajax({
    url:'http://localhost:8888/goods/list',
    data: {
        current: 1,
        pagesize: 100,
        search: '',
        filter:'',
        // saleType:'',
        sortType:'id',
        sortMethod:'ASC',
        category:'大家电'
    },
})

let str=` `

res.list.forEach( item => {
    str+=`
    <li data-id="${item.goods_id}">
    <img width=270 height=300 data-src="${item.img_big_logo}" alt="" class="goods_img"> 
    <p class="jieshao">
    ${item.title}
    </p>
    <p class="price">
          <span class="new">￥${item.current_price}</span>
          <span class="old">￥${item.price}</span>
    </p>
</li>
    `
})

tabs3.innerHTML = str
useLazy1()
}

/**************** 海外购 *******************/
async function bindrecommendedHaiwai(){
const res = await $.ajax({
    url:'http://localhost:8888/goods/list',
    data: {
        current: 1,
        pagesize: 100,
        search: '',
        filter:'',
        // saleType:'',
        sortType:'id',
        sortMethod:'ASC',
        category:'海外购'
    },
})

let str=` `

res.list.forEach( item => {
    str+=`
    <li data-id="${item.goods_id}">
    <img width=270 height=300 data-src="${item.img_big_logo}" alt="" class="goods_img"> 
    <p class="jieshao">
    ${item.title}
    </p>
    <p class="price">
          <span class="new">￥${item.current_price}</span>
          <span class="old">￥${item.price}</span>
    </p>
</li>
    `
})

tabs4.innerHTML = str
useLazy1()
}


/**************** 家具建材 *****************/
async function bindrecommendedJiajv(){
const res = await $.ajax({
    url:'http://localhost:8888/goods/list',
    data: {
        current: 1,
        pagesize: 100,
        search: '',
        filter:'',
        // saleType:'',
        sortType:'id',
        sortMethod:'ASC',
        category:'家装建材'
    },
})

let str=` `

res.list.forEach( item => {
    str+=`
    <li data-id="${item.goods_id}">
    <img width=270 height=300 data-src="${item.img_big_logo}" alt="" class="goods_img"> 
    <p class="jieshao">
    ${item.title}
    </p>
    <p class="price">
          <span class="new">￥${item.current_price}</span>
          <span class="old">￥${item.price}</span>
    </p>
</li>
    `
})

tabs5.innerHTML = str
useLazy1()
}

/***************** 珠宝首饰 *****************/
async function bindrecommendedJewelry(){
const res = await $.ajax({
    url:'http://localhost:8888/goods/list',
    data: {
        current: 1,
        pagesize: 100,
        search: '',
        filter:'',
        // saleType:'',
        sortType:'id',
        sortMethod:'ASC',
        category:'珠宝首饰'
    },
})

let str=` `

res.list.forEach( item => {
    str+=`
    <li data-id="${item.goods_id}">
    <img width=270 height=300 data-src="${item.img_big_logo}" alt="" class="goods_img"> 
    <p class="jieshao">
    ${item.title}
    </p>
    <p class="price">
          <span class="new">￥${item.current_price}</span>
          <span class="old">￥${item.price}</span>
    </p>
</li>
    `
})

tabs6.innerHTML = str
useLazy1()
}

/***************** 女装 *******************/
async function bindrecommendedNvzhuang(){
const res = await $.ajax({
    url:'http://localhost:8888/goods/list',
    data: {
        current: 1,
        pagesize: 100,
        search: '',
        filter:'',
        // saleType:'',
        sortType:'id',
        sortMethod:'ASC',
        category:'女装'
    },
})

let str=` `

res.list.forEach( item => {
    str+=`
    <li data-id="${item.goods_id}">
    <img width=270 height=300 data-src="${item.img_big_logo}" alt="" class="goods_img"> 
    <p class="jieshao">
    ${item.title}
    </p>
    <p class="price">
          <span class="new">￥${item.current_price}</span>
          <span class="old">￥${item.price}</span>
    </p>
</li>
    `
})

tabs7.innerHTML = str
useLazy1()
}

/*************** LazyLoad *****************/
function useLazy1(){
    var images1 = document.querySelectorAll('.tab > li > ul > li > img')
    new LazyLoad( images1 )
}


/*************** 楼梯层 *****************/
const floornav = document.querySelector('.floor_nav')
function louticheng(){
    window.onscroll = function(){
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    scrollTop >= 800 ? floornav.style.display = 'block' : floornav.style.display = 'none' 
}

$('.floor_nav > ul > li').on('click', function(){
    const floorindex = $(this).index()
    const floorli = $('.floor_index').eq(floorindex)
    $('html, body').animate({
        scrollTop:floorli.offset().top
    }, 500)
})

$(window).on('scroll', () => {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    $('.floor_index').each(function(index, item){
        if(scrollTop >= $(item).offset().top){
            $('.floor_nav > ul > li').eq(index).addClass('active').siblings().removeClass('active')
        }
    })
})

$('.goToTop').on('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
})

}
louticheng()


/***************** 跳转详情页面 **********************/
tabs1.addEventListener('click', e => {
    if (e.target.nodeName === 'LI') {
  
        const id = e.target.dataset.id
        window.sessionStorage.setItem('goodsId', id)
        window.location.href = 'detail.html'
  
    }
  })
  tabs2.addEventListener('click', e => {
    if (e.target.nodeName === 'LI') {
  
        const id = e.target.dataset.id
        window.sessionStorage.setItem('goodsId', id)
        window.location.href = 'detail.html'
  
    }
  })
  tabs3.addEventListener('click', e => {
    if (e.target.nodeName === 'LI') {
  
        const id = e.target.dataset.id
        window.sessionStorage.setItem('goodsId', id)
        window.location.href = 'detail.html'
  
    }
  })
  tabs4.addEventListener('click', e => {
    if (e.target.nodeName === 'LI') {
  
        const id = e.target.dataset.id
        window.sessionStorage.setItem('goodsId', id)
        window.location.href = 'detail.html'
  
    }
  })
  tabs5.addEventListener('click', e => {
    if (e.target.nodeName === 'LI') {
  
        const id = e.target.dataset.id
        window.sessionStorage.setItem('goodsId', id)
        window.location.href = 'detail.html'
  
    }
  })
tabs6.addEventListener('click', e => {
    if (e.target.nodeName === 'LI') {
  
        const id = e.target.dataset.id
        window.sessionStorage.setItem('goodsId', id)
        window.location.href = 'detail.html'
  
    }
  })
tabs7.addEventListener('click', e => {
    if (e.target.nodeName === 'LI') {
  
        const id = e.target.dataset.id
        window.sessionStorage.setItem('goodsId', id)
        window.location.href = 'detail.html'
  
    }
  })



